<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="400" height="400"></canvas>

    <script>
        let el = document.getElementsByTagName("canvas");

        let ctx = el[0].getContext("2d");

        // ctx.....
        // 直线 lineTo(x, y)
        // 移动 moveTo(x, y)

        // 填充颜色 （内部）fill();
        // 填充颜色 （轮廓）stroke();
        // 设置颜色 （内部）fillStyle();
        // 设置颜色 （轮廓）strokeStyle();

        // 矩形 空心    rect(x,y, x2,y2)
        // 矩形 实心  fillRect(x,y, x2,y2)

        ctx.rect( 10 ,10 , 200, 50);
        ctx.strokeStyle = "#cccccc";
        ctx.stroke();
        ctx.fillStyle = "blue"
        ctx.fillRect(10, 70, 200 ,100)

        // 文本
        ctx.fillText("HELLO WORLD ", 10, 40)
        // arc(x, y, radius, startAngle, endAngle, anticlockwise)
        ctx.beginPath();
        // 弧度 的计算， 不是 0~360；
        // 0 ~ 2 PI 3.1415 
        ctx.strokeStyle = "#ff0000";
        ctx.arc(300, 70, 20, 0, -3.1415);
        ctx.stroke();
        // ctx.arcTo(x1, y1, x2, y2, radius)
        ctx.arcTo(350, 70, 360, 20, 20);
        ctx.stroke();

        // ctx.quadraticCurveTo(cp1x, cp1y, x, y)
        //  二次贝塞尔曲线
        ctx.beginPath();
        ctx.strokeStyle = "#0000ff";
        ctx.quadraticCurveTo(300, 100, 300, 150)
        ctx.stroke();
    </script>
</body>
</html>